<template>
  <el-container>
    <el-header class="homeHeader">
      <div class="title">云E办</div>
      <el-dropdown class="userInfo" @command="commandHandler">
        <span class="el-dropdown-link">
          {{ userInfo.name }}
          <i><img :src="userInfo.userFace"></img></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <!--菜单项的点击会携带command参数出发command事件-->
          <el-dropdown-item command="setting">设置</el-dropdown-item>
          <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
          <el-dropdown-item command="logout">注销登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu router unique-opened>
          <!--根据路由的配置进行渲染-->
          <!--一级：导航标题 二级等等：菜单项-->
          <el-submenu :index="String(index)" v-for="(submenu,index) in routes" :key="index">
            <template slot="title">
              <i :class="submenu.meta.iconCls" style="color:#C0A080; margin-right: 5px;"></i>
              <!--标题-->
              <span>{{ submenu.name }}</span>
            </template>
            <!--子项-->
            <!--底层 点击菜单项会导航至其 index-->
            <el-menu-item :index="`${menuItem.path}`" v-for="(menuItem,i) in submenu.children" :key="i">
              <span>{{ menuItem.name }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: "Home",
    computed: {
      // filterRoutes() {
      //   // 过滤无需展示的菜单，如Login
      //   // 有meta.hidden不显示，没有meta或meta.hidden的展示
      //   return this.$router.options.routes.filter(item => !item.meta?.hidden)
      // }
      ...mapState('home', ['routes']),
      userInfo() {
        return JSON.parse(sessionStorage.getItem('userInfo'))
      }
    },
    methods: {
      commandHandler(command) {
        if (command == 'logout') {
          this.$confirm('是否注销？', '确认信息', {
            distinguishCancelAndClose: true, confirmButtonText: '注销', cancelButtonText: '放弃'
          })
              .then(() => {
                let userInfo = {
                  tokenStr: localStorage.getItem('tokenStr'),
                  // name : this.userInfo.name
                }
                this.$store.dispatch('home/logout', userInfo)
              })
              .catch(action => {
                this.$message({
                  type: 'info',
                  message: '放弃注销'
                })
              });
        }

      }
    }

  }
</script>

<style scoped lang="less">
  // 头部 --------------------------------
  .homeHeader {
    background-color: skyblue;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    //box-sizing: border-box;
    > .title {
      font-size: 30px;
      font-family: 华文行楷;
      color: white;
    }

    .userInfo {
      cursor: pointer;

      .el-dropdown-link img {
        width: 48px;
        height: 48px;
        border-radius: 24px;
        margin-left: 8px;
      }
    }
  }

  .el-aside {
    overflow: hidden;
  }
</style>
